<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-04-14 09:06:05
 * @LastEditTime: 2022-04-15 16:52:41
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="product_detail">
    <div class="head">
      <el-image class="img_item" :src="form.fileAddress" style="height: 294px; width: 294px"></el-image>
      <div class="top_content">
        <h2 class="product_title">
          <tool-tip-node :oneLine="false" :nodes="'cpmc'" :value="form.productName || '--'"></tool-tip-node>
        </h2>
        <div class="label_item" style="margin-bottom: 16px">
          <div class="label" style="line-height: 22px; padding-top: 0">
            <span>价</span><span style="float: right">格</span>
          </div>
          <div class="label_value" style="line-height: 22px">
            <span style="font-size: 22px; color: #fa7355">{{ form.productPrice }}</span>
            <span style="font-size: 14px; color: #333">元</span>
          </div>
        </div>
        <div class="label_item" style="margin-bottom: 16px">
          <div class="label" style="padding-top: 1px">服务区域</div>
          <div class="label_value" style="line-height: 16px; height: 64px">
            <tool-tip-node
              :nodes="'fwqy'"
              :oneLine="false"
              :isSetWidth="true"
              :value="form.serviceArea || '--'"
            ></tool-tip-node>
          </div>
        </div>
        <div class="label_item" style="margin-bottom: 16px">
          <div class="label">默认规格</div>
          <div class="label_value" style="height: 40px">
            <tool-tip-node
              :oneLine="false"
              :nodes="'mrgg'"
              :isSetWidth="true"
              :value="form.defaultSpecification || '--'"
            ></tool-tip-node>
          </div>
        </div>
        <div class="label_item" style="margin-bottom: 0">
          <div class="label"><span>备</span><span style="float: right">注</span></div>
          <div class="label_value" style="height: 40px">
            <tool-tip-node
              :nodes="'bz'"
              :isSetWidth="true"
              :oneLine="false"
              :value="form.remark || '--'"
            ></tool-tip-node>
          </div>
        </div>
      </div>
    </div>
    <h1>商品描述</h1>
    <div class="product_describe">{{ form.productDescription || '暂无数据' }}</div>
    <h1>产品效果图</h1>
    <div class="product_img">
      <div
        class="img_item"
        v-for="(item, index) in form.productUrlList"
        :key="index"
        :style="{ marginRight: (index + 1) % 3 == 0 ? '0' : '20px' }"
      >
        <el-image class="img_item" :src="item.fileAddress" style="height: 100%; width: 100%"></el-image>
      </div>
    </div>
    <div class="footer">
      <el-button size="small" class="commonBtn1" @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
import ToolTipNode from '../../../components/ToolTipNode.vue'
export default {
  components: { ToolTipNode },
  props: {
    id: {
      type: [String, Number]
    }
  },
  data() {
    return {
      form: {}
    }
  },
  created() {
    this.getDetailProduct()
  },
  methods: {
    getDetailProduct() {
      this.$https({
        method: 'post',
        url: '/product/getDetail?id=' + this.id
      })
        .then(res => {
          if (res.code == 0) {
            this.form = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="less" scoped>
#product_detail {
  .head {
    border: 1px solid #d6d6d6;
    padding: 20px;
    display: flex;
    margin-bottom: 30px;
    .img_item {
      margin-right: 20px;
      flex-shrink: 0;
    }
    .top_content {
      flex: 1;
      line-height: 1;
      .product_title {
        margin-bottom: 16px;
        font-size: 20px;
        height: 44px;
        line-height: 22px;
        color: #111;
      }
      .label_item {
        margin-bottom: 20px;
        display: flex;
        .label {
          padding-top: 4px;
          font-size: 14px;
          color: #666;
          flex-shrink: 0;
          width: 56px;
          margin-right: 16px;
        }
        .label_value {
          flex: 1;
          color: #333;
          font-size: 14px;
          line-height: 20px;
          /deep/ .fwqy {
            -webkit-line-clamp: 4;
          }
        }
      }
    }
  }
  .product_describe {
    margin: 20px 0;
  }
  .product_img {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .img_item {
      width: 256px;
      height: 256px;
      box-sizing: border-box;
      margin-bottom: 20px;
      background: #f2f3f7;
      border: 1px solid #d6d6d6;
    }
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    .commonBtn1 {
      width: 130px;
    }
  }
  h1 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
    span {
      font-weight: normal;
      color: #999;
    }
  }
}
</style>
